<template>
	<div class="math-formula-item">
		<!--认时钟-->
		<div class="formula-item" v-for="(item, index) in list" :key="index">
			<div class="clock-list">
				<div class="clock-item">
					<div class="clock-hour" :style="`transform: rotate(${item.Angles.hourAngle}deg)`"></div>
					<div class="clock-minute" :style="`transform: rotate(${item.Angles.minuteAngle}deg)`"></div>
					<div class="clock-point"></div>
					<clock />
				</div>
				<div class="clock-input">
					<div class="placeholder">
						<input v-model="item.input" disabled />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { computed } from 'vue';
import clock from "./clock.vue"
import { Canvg } from 'canvg';
const props = defineProps({
	data: {
		type: Object,
		default: () => ({})
	},
})
const list = computed(() => {
	return props.data
})
console.log('list', props.data)
</script>

<style lang="scss" scoped>
@import "@/styles/var.scss";
.math-formula-item {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	.formula-item {
		width: 25%;
		padding: 2.7rem 0;
	}
}
.clock-list {
	position: relative;
	.clock-item {
		position: relative;
		z-index: 1;
		width: 9rem;
		height: 9rem;
		margin: auto;
		.clock-hour, .clock-minute {
			position: absolute;
			left: 50%;
			bottom: 50%;
			width: 0.1rem;
			background-color: #000;
			transform: translateX(-50%);
			transform-origin: bottom;
			&::before {
				content: "";
				position: absolute;
				width: 0;
				height: 0;
				bottom: 100%;
				left: 50%;
				transform: translateX(-50%);
				border-bottom: 0.5rem solid #000;
				border-left: 0.5rem solid transparent;
				border-right: 0.5rem solid transparent;
			}
		}
	}
	.hour-mode {
		position: absolute;
		right: 0;
		top: 0;
		font-size: 1rem;
	}
	.clock-input {
		padding-top: 1.2rem;
		.placeholder {
			margin: auto;
			text-align: center;
			border: 2px solid $gray-ligh-4;
			border-radius: 0.4rem;
			height: 2.3rem;
			width: 5rem;
			box-sizing: border-box;
			font-size: 30rpx;
			font-family: "Alimama";
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 1;
			overflow: hidden;
			background-color: #fff;
			> div {
				width: 4rem;
			}
		}
	}
	.clock-hour {
		height: 15%
	}
	.clock-minute {
		height: 29%;
	}
	.clock-point {
		position: absolute;
		width: 0.8rem;
		height: 0.8rem;
		background-color: #000;
		left: 50%;
		top: 50%;
		transform: translate3d(-50%, -50%, 0);
		border-radius: 20px;
	}
}
</style>